<template>
	<div class="system-menu-container">
		<el-dialog
			:title="ruleForm.type !== 2 ? '编辑菜单' : '编辑按钮'"
			destroy-on-close
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
			v-model="isShowDialog"
			width="769px"
		>
			<el-form :model="ruleForm" size="small" :rules="rules" ref="form" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item v-if="ruleForm.type !== 2" label="菜单名称" prop="menuName">
							<el-input v-model="ruleForm.menuName" placeholder="请输入菜单名称" clearable></el-input>
						</el-form-item>
						<el-form-item v-else label="按钮名称" prop="menuName">
							<el-input v-model="ruleForm.menuName" placeholder="请输入按钮名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="权限标识" prop="permission">
							<el-input disabled v-model="ruleForm.permission" placeholder="请输入权限标识（多个请用逗号隔开）" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col v-if="ruleForm.type !== 2" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="路由名称" prop="routePath">
							<el-input disabled v-model="ruleForm.routePath" placeholder="请输入路由名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col v-if="ruleForm.type === 1" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="组件地址" prop="assemblyPath">
							<el-input disabled v-model="ruleForm.assemblyPath" placeholder clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col v-if="ruleForm.type !== 2" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单图标" prop="icon">
							<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.icon" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs, watch, defineComponent } from 'vue';
import IconSelector from '/@/components/iconSelector/index.vue';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
import { edit } from "/@/api/platform/menu/index"
import { setBackEndControlRefreshRoutes } from '/@/router/backEnd';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
	name: 'EditMenu',
	components: { IconSelector },
	props: {
		treeList: {
			type: Array,
			default: []
		}
	},
	setup(props: any, context: any) {
		const res = ref(props);
		const treeMenu = new Proxy(res, {
			get: (target, key) => {
				return target[key]
			}
		})
		const state = reactive({
			isShowDialog: false,
			ruleForm: {
				id: 0,
				type: 0,
				parentID: 0,
				routePath: '', // 路由名称
				assemblyPath: '', // 组件地址
				sort: 0, // 菜单排序
				menuName: '', // 菜单名称
				icon: '', // 菜单图标
				permission: '', // 权限标识（多个请用逗号隔开），最后转成数组格式
			},
			rules: {
				menuName: [{
					required: true,
					validator: (rule: any, value: any, callback: any) => {
						if (value === '' && state.ruleForm.type !== 2) {
							callback(new Error('请输入菜单名称！'))
						} else if (value === '' && state.ruleForm.type === 2) {
							callback(new Error('请输入按钮名称！'))
						} else {
							callback()
						}
					},
					trigger: "blur"
				}]
			}
		});
		var form = ref();
		// 打开弹窗
		const openDialog = (row: any) => {
			state.ruleForm.id = row.Id;
			state.ruleForm.type = row.Type;
			state.ruleForm.routePath = row.RoutePath;
			state.ruleForm.assemblyPath = row.AssemblyPath;
			state.ruleForm.menuName = row.MenuName;
			state.ruleForm.icon = row.Icon;
			state.ruleForm.permission = row.Permission;
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
			initForm();
		};
		const onSubmit = () => {
			form.value.validate((valid: boolean) => {
				if (!valid) {
					return false;
				}
				edit(state.ruleForm).then((res) => {
					ElMessageBox.alert(res.Message, '提示', {}).then(() => {
						// 刷新父级数据
						context.emit("sendRefresh");
						closeDialog(); // 关闭弹窗
						initForm();
						setBackEndControlRefreshRoutes() // 刷新菜单
					}).catch(() => { });
				})
			})
		};
		// 表单初始化，方法：`resetFields()` 无法使用
		const initForm = () => {
			form.value.resetFields();
		};

		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
			treeMenu,
			form
		};
	},
});
</script>
